import React, { Component , useRef,useState, memo, createContext,useContext,useMemo, useCallback,  useEffect } from 'react';
import ReactDom from 'react-dom';
import './index.less'
import 'antd/dist/antd.css';
import { Button, DatePicker } from 'antd';
import { Input } from 'antd';
import { List, Avatar } from 'antd';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
// TodoList组件
const App=()=>{
  const [inputValue, valueChange] = useState("");
  const [lists1, submitClick1] = useState([]);
  const [lists2,submitClick2] = useState([]);
  const testClick = ()=>{
    if(inputValue==""){
      alert("请输入内容！");
      return;
    }
    valueChange("");
    submitClick1([...lists1, inputValue])
  };
  const Click1 = useCallback( (e)=> {
      console.log(e)
      lists2.splice(lists2.length,0,lists1[e])
      lists1.splice(e,1);
      submitClick1([...lists1])
      submitClick2([...lists2])
  })
  const Click2 = useCallback( (e)=> {
    console.log(e)
    lists2.splice(e,1);
    localStorage.setItem('did',JSON.stringify(lists2))
    submitClick2([...lists2])
  },[lists2])

  useMemo(()=>{
    console.log(lists1,lists2)
  },[lists1,lists2])

  useEffect(()=>{
    let data1=JSON.parse(localStorage.getItem('todo'))
    let data2=JSON.parse(localStorage.getItem('did'))
    submitClick1(data1)
    submitClick2(data2)
  },[])
  useEffect(()=>{
    localStorage.setItem('todo',JSON.stringify(lists1))
  },[lists1])

  useEffect(()=>{
    localStorage.setItem('did',JSON.stringify(lists2))
  },[lists2])
return (
      <div className='layout' >
      <div className='head1'>
      <p >ToDoList</p>
      </div>
      <div style={{width:'100%',height:"80px"}}>
      <Input
          value={inputValue}
          onChange={(e)=>valueChange(e.target.value)} className="inputs" style={{width:'80%',}}/>
      <Button onClick={testClick} className='btn'>提交</Button>
    </div>
    <List
     header={<div>Todo</div>}        
     size="large"
     bordered
     split
     dataSource= {lists1}
     renderItem={(item,index)=>(
       <List.Item className='item1'>
         <div>{item}</div>
         <Button type="primary"  onClick={(e)=>Click1(index)}
       >
       已做</Button>
       </List.Item>
     )}/>
         <List
     header={<div>Did</div>}        
     size="large"
     bordered
     split
     dataSource= {lists2}
     renderItem={(item,index)=>(
       <List.Item className='item2'>
         <div>{item}</div>
         <Button type="primary"  onClick={(e)=>Click2(index)}
       >
       删除</Button>
       </List.Item>
     )}/>
</div>
);
}

ReactDom.render(
  <div>
    <App ></App>
  </div>
,document.getElementById("root"));
